<template>
  <view class="">
    <view class="subject_box">
      <view class="subject_tab u-f">
        <view class="u-f-ac" :class="{active1:value===index}"  v-for="(item,index) in range" :key="index" @click="selectChange(index)">
          <span class="flex1 u-f-jsa color64">{{rangekey?item[rangekey]:item}}</span>
          <span class='line' v-show="index<(range.length-1)"></span>
          <span class='underline'></span>
           </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      range: {
        type: Array,
        default: []
      },
      rangekey:String,
      value: Number,
      
    },
    watch:{
     value:function(val){
        console.log(val)
      }
    },
    created() {
      console.log(this.range,this.value)
    },
    data() {
      return {

      };
    },
    created() {
      // console.log(this.$attrs,(this.$attrs.answer&&this.$attrs.right)=="A")
    },
    methods: {
      selectChange(e) {
        if (this.value !== e) {
           // console.log(e)
          this.$emit('update:value', e)
        }

      }
    }
  }
</script>

<style lang="scss">
  .subject_box {
    @include subject
  }
</style>